<template>
	<view class="" style="padding-bottom: 150rpx;">
		<u-popup :show="show" @close="show=false" :round="20" v-if="list.data.length">
			<view class="mainpadding" style="background-color: #282536;">
				<view class="textcenter titletext xiaobai">发布者</view>
				<view class="margin_top flexbetween"
					@click="jumper('/pages_homepage/gerenzhuye?id=',list.data[currentindex].user.id)">
					<view class="flexleft">
						<image class="grtoux margin_right3" :src="list.data[currentindex].user.avatar_text" mode="">
						</image>
						<view class="textcenter sanshier xiaobai">{{list.data[currentindex].user.nickname}}</view>
					</view>
					<view class="honbtn flexcenter"
						v-if="list.data[currentindex].is_gz==0 && list.data[currentindex].user.id!=myuserId"
						@click.stop="gz_fn()">关注</view>
				</view>
				<view class="flexbetween margin_top5">
					<view class="grbox flexleft" style="padding: 26rpx 40rpx;" @click="dz_fn();show=false;">
						<view class="dianzan margin_right1"></view>
						<view class="xiaobai ershil" v-if="list.data[currentindex].is_dz==0">点赞视频</view>
						<view class="xiaobai ershil" v-if="list.data[currentindex].is_dz==1">取消点赞</view>
					</view>
					<view class="grbox flexleft" style="padding: 24rpx 40rpx;" @click="sc_fn();show=false;">
						<view class="shoucang margin_right1"></view>
						<view class="xiaobai ershil" v-if="list.data[currentindex].is_collect==0">收藏视频</view>
						<view class="xiaobai ershil" v-if="list.data[currentindex].is_collect==1">取消收藏</view>
					</view>
				</view>
			</view>
		</u-popup>
		<view class="mainpadding">
			<!-- 搜索 -->
			<view class="ssousuobox flexleft">
				<u-icon name="search" color="#fff" size="28"></u-icon>
				<input type="text" class="xiaobai" style="width:100%" placeholder="请输入搜索内容" v-model="keywords" confirm-type="search" @confirm="search">
			</view>
			<!-- 导航 -->
			<!-- <view class="tab_nav">
				<view class="navTitle" v-for="(item,index) in navList" :key="index">
					<view :class="{'active':isActive === index}" @click="checked(index)">
						{{item.title}}
					</view>
				</view>
			</view> -->
		</view>
		<!-- 轮播图 -->
		<u-swiper :list="list1" keyName="image_text" indicator circular @click="lbtclick" height="141"
			radius="0"></u-swiper>
		<view class="mainpadding">
			<!-- 分类 -->
			<view class="flexbetween margin_top1">
				<view class="ershiw flexcenter" @click="tzsplb(1)">
					<view class="">
						<view class="syicon">
							<image src="../static/image/sysem/tjgz.png" mode=""></image>
						</view>
						<view class="ershil xiaobai textcenter">推荐关注</view>
					</view>
				</view>
				<view class="ershiw flexcenter" @click="tzsplb(2)">
					<view class="">
						<view class="syicon">
							<image src="../static/image/sysem/xzrb.png" mode=""></image>
						</view>
						<view class="ershil xiaobai textcenter">下载热榜</view>
					</view>
				</view>
				<view class="ershiw flexcenter" @click="tzsplb(3)">
					<view class="">
						<view class="syicon">
							<image src="../static/image/sysem/gfrx.png" mode=""></image>
						</view>
						<view class="ershil xiaobai textcenter">官方严选</view>
					</view>
				</view>
				<view class="ershiw flexcenter" @click="jumper('/pages_homepage/paihangbang','')">
					<view class="">
						<view class="syicon">
							<image src="../static/image/sysem/phb.png" mode=""></image>
						</view>
						<view class="ershil xiaobai textcenter">排行榜</view>
					</view>
				</view>
			</view>
			<!-- 热门推荐 -->
			<view class=" margin_top">
				<view class="flexbetween">
					<view class="dingwei">
						<view class="sanshier xiaobai fonweight dingwei" style="z-index: 1;">热门推荐</view>
						<image class="ztxhx" src="../static/image/sysem/ztbq.png" mode=""></image>
					</view>
					<view class="flexright" @click="tzsplb(1)">
						<view class="ershil xiaohui margin_right1">查看更多</view>
						<u-icon name="arrow-right" color="#AFAFAF" size="14"></u-icon>
					</view>
				</view>
				<view class="flexbetween flex_wrap" v-if="list.data.length">
					<view class="shibox margin_top" v-for=" (item,index) in list.data" :key="item.id"
						@click="jumpDetail(item.id,item.user.id);item.view_num =Number(item.view_num)+1">
						<view class="dingwei">
							<view class="jinbbox flexcenter" v-if="Number(item.price)">
								<image class="jinvi" src="../static/image/sysem/jb.png" mode=""></image>
								<view class="strongtext fonweight" style="color:#FEC84F ;">{{item.price}}</view>
							</view>
							<image class="shilitu" :src="item.image_text" mode=""></image>
							<view class="flexbetween"
								style="position: absolute;bottom: 20rpx; left: 20rpx; width: 88%;">
								<view class="bofangbox flexcenter">
									<view class="margin_right1">
										<u-icon name="play-right" color="#fff" size="14"></u-icon>
									</view>
									<view class="smalltext xiaobai">{{item.view_num}}</view>
								</view>
								<view class="smalltext xiaobai ">{{formatSeconds(Number(item.sc))}}</view>
							</view>
						</view>
						<view class="spbrbox" @click.stop="currentindex=index;show = true">
							<view class="ershil xiaobai yhxk">{{item.des}}</view>
							<view class="flexbetween margin_top">
								<view class="flexleft">
									<image class="touxiang margin_right1" :src="item.user.avatar_text" mode=""></image>
									<view class="strongtext xiaohui ">{{item.user.nickname}}</view>
								</view>
								<image class="sangd" src="../static/image/sysem/sgd.png" mode=""></image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<tabbar :current="0" ref="tabbardiref"></tabbar>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	import tabbar from '@/components/tabbar/tabbar.vue'
	export default {
		components:{
			tabbar
		},
		data() {
			return {
				list1: [],
				isActive: 0,
				navList: [{
					index: 0,
					title: '关注'
				}, {
					index: 1,
					title: "精选"
				}, {
					index: 1,
					title: "最新"
				}, {
					index: 1,
					title: "热门"
				}, {
					index: 1,
					title: "国产"
				}],
				show: false,
				page: 1,
				limit: 12,
				list: {
					data: []
				},
				currentindex: 0,
				myuserId: "",
				keywords:"",
			}
		},
		onLoad() {
			uni.hideTabBar()
			this.getbanner()
			this.init()
		},
		onPullDownRefresh() {
			this.init()
		},
		
		onShow() {
			setTimeout(()=>{
				this.$refs.tabbardiref.noreadNum = 0
				this.$refs.tabbardiref.getnoreadNum()
			},100)
			this.myuserId = uni.getStorageSync("user_id")
		},
		methods: {
			search(){
				if(this.keywords==""){
					httpRequest.toast("请输入搜索内容")
					return false
				}
				uni.navigateTo({
					url: '/pages_homepage/tuijiangz?id=4&keywords='+this.keywords 
				})
			},
			dz_fn() { //点赞/取消点赞
				if (!httpRequest.checkIsLogin()) {
					uni.navigateTo({
						url: "/pages/login/login"
					})
					return false
				}
				httpRequest.request('/api/videocl/clVideoDz', 'GET', {
					id: this.list.data[this.currentindex].id
				}).then(res => {
					httpRequest.toast(res.msg)
					if (res.code == 1) {
						this.list.data[this.currentindex].is_dz = this.list.data[this.currentindex].is_dz == 0 ?
							1 : 0
					}
				})
			},
			sc_fn() { //收藏/取消收藏
				if (!httpRequest.checkIsLogin()) {
					uni.navigateTo({
						url: "/pages/login/login"
					})
					return false
				}
				httpRequest.request('/api/videocl/clVideoCollect', 'GET', {
					id: this.list.data[this.currentindex].id
				}).then(res => {
					httpRequest.toast(res.msg)
					if (res.code == 1) {
						this.list.data[this.currentindex].is_collect = this.list.data[this.currentindex]
							.is_collect == 0 ? 1 : 0
					}
				})
			},
			gz_fn() { //关注/取消关注
				if (!httpRequest.checkIsLogin()) {
					uni.navigateTo({
						url: "/pages/login/login"
					})
					return false
				}
				httpRequest.request('/api/user/clUserGz', 'GET', {
					b_user_id: this.list.data[this.currentindex].user.id
				}).then(res => {
					httpRequest.toast(res.msg)
					if (res.code == 1) {
						this.init()
						const obj = this.list.data[this.currentindex]
						uni.$emit("guanzhuemitfn", {is_gz:obj.is_gz==0?1:0,frienduser_id:obj.user.id})
					}
				})
			},
			jumpDetail(id, listuser_id) {
				uni.navigateTo({
					url: "/pages_homepage/shipinxq?id=" + id + "&listuser_id=" + listuser_id
				})
				this.addviewnum(id)
			},
			addviewnum(id) {
				httpRequest.request('/api/videocl/addViewNum', 'GET', {
					id
				}).then(res => {})
			},
			init(isPage, page) {
				let _this = this
				httpRequest.request('/api/videocl/videoIndex', 'GET', {
					page: page || 1,
					limit: 12,
					is_rec: 1,
				}).then(res => {
					uni.stopPullDownRefresh()
					if (res.code == 1) {
						let resList = res.data;
						let dataList = _this.list;
						if (isPage == true) {
							_this.list.data = dataList.data.concat(resList.data);
						} else {
							this.list = res.data
							_this.list.data = resList.data;
						}
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			onReachBottom() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.init(true, page);
			},
			getbanner() { //获取轮播图
				httpRequest.request('/api/index/getAdvertiseList', 'POST', {
					advertise_position_id: 4,
					is_more: 1
				}).then(res => {
					this.list1 = res.data
				}).catch(err => {})
			},
			lbtclick(e) {
				let that = this
				uni.navigateTo({
					url: that.list1[e].url
				})
			},
			// 跳转视频列表
			tzsplb(i) {
				uni.navigateTo({
					url: '/pages_homepage/tuijiangz?id=' + i
				})
			},
			checked(index) {
				this.isActive = index
			},
			jumper(url, val) {
				uni.navigateTo({
					url: url + val
				})
			},
			close() {
				this.show = false
			}
		}
	}
</script>
<style lang="scss" scoped>
	// 视频
	.sangd {
		width: 4rpx;
		height: 24rpx;
	}

	.touxiang {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50rpx;
	}

	.spbrbox {
		padding: 30rpx 20rpx;
	}

	.bofangbox {
		padding: 7rpx 10rpx;
		border-radius: 18rpx 18rpx 18rpx 18rpx;
		background-color: rgba(255, 255, 255, .3);
	}

	.shilitu {
		width: 332rpx;
		height: 176rpx;
		border-radius: 13rpx 13rpx 0rpx 0rpx;
	}

	.shibox {
		width: 48%;
		background: #282536;
		border-radius: 13rpx 13rpx 13rpx 13rpx;
	}
</style>
<style lang="scss" scoped>
	.grbox {
		background-color: #3E3B4A;
		border-radius: 6rpx;
		width: 37%;
	}

	.honbtn {
		width: 106rpx;
		height: 46rpx;
		background: #DD5056;
		border-radius: 23rpx 23rpx 23rpx 23rpx;
		font-size: 24rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
	}

	.grtoux {
		width: 98rpx;
		height: 98rpx;
		border-radius: 50%
	}

	.ztxhx {
		width: 127rpx;
		height: 10rpx;
		position: absolute;
		bottom: 0;
		z-index: 0;
		left: 0;
	}

	.syicon {
		margin: auto;
		width: 108rpx;
		height: 118rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.tab_nav {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.tab_nav .navTitle {
		height: 90rpx;
		line-height: 90rpx;
		width: 100%;
		text-align: center;
		font-size: 30rpx;
		font-weight: 600;
		color: #484557;
	}

	.active {
		font-size: 30rpx;
		color: #F3F1FF;
		font-weight: bold;
		position: relative;
	}

	.active::after {
		content: "";
		position: absolute;
		width: 56rpx;
		height: 8rpx;
		background-size: 100% 100%;
		background: linear-gradient(90deg, #5F6AC9 0%, #B2508F 28%, #DE4370 100%);
		left: 0rpx;
		right: 0rpx;
		bottom: 0rpx;
		margin: auto;
	}
</style>